<script lang='ts' setup>
import { reactive,onMounted,ref} from 'vue'

const state = reactive({ 
	keyword: '',
	total: 0, 
	pageNum: 1,
	pageSize: 10,
    tableData: [
		{
			id: 1, 
			job: '大螺丝',
			six: '女',
			money: '22',
		}
	] as Array<any>,
    rowId: 0
}) 
const props = withDefaults(defineProps<{ 
    modelValue: boolean, 
}>(), {
    modelValue: false, 
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}

const search = () => {}

const handleSizeChange = () => {}
const handleCurrentChange = () => {}

</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" title="卡项列表" @close="closeDialog" style="width: 1200px;" center>
            <section>
				<section class="flex-c-s">
					<el-form-item label="卡项名称">
						<el-input v-model="state.keyword" placeholder="输入卡项名称" clearable  > </el-input>
					</el-form-item>
					<el-button type="primary" @click="search"  >搜 索</el-button> 
				</section> 
				
				<section class="mb10">
					<el-table :data="state.tableData" style="width: 100%" border> 
						<el-table-column type="selection" width="55" />
						<el-table-column label="岗位名称" prop="job" />
						<el-table-column label="卡名称" prop="money" />
						<el-table-column label="属性" prop="orderPrice" />
						<el-table-column label="规格" prop="orderPrice" />
						<el-table-column label="售价(元)" prop="orderPrice" />
						<el-table-column label="服务次数" prop="orderPrice" />
						<el-table-column label="服务时长(分钟)" prop="orderPrice" />
						<el-table-column label="有效期(月)" prop="orderPrice" />
						<el-table-column label="来源" prop="orderPrice" />
						<el-table-column label="上架状态" prop="orderPrice" />
					</el-table>
				</section> 
				<section class="mt20 flex-c-s">
					<el-pagination
						v-model:current-page="state.pageNum"
						v-model:page-size="state.pageSize"
						:page-sizes="[10, 20, 30]"
						:background="true"
						layout="total, sizes, prev, pager, next, jumper"
						:total="state.total"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						/>
					<section>
						<el-button @click="search"  >取消</el-button>
						<el-button type="primary" @click="search"  >确定</el-button>
					</section>
				</section>
			</section>
        </el-dialog>
    </main>
</template>

<style lang='scss' scoped>
.flex-c-s{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>